<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{ viewCount | numberFormat }}</h2>
    <h3>显示格式：12,345,678</h3>
</div>
</body>
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    /**
     * 千分符的实现的思路：
     * 特点：从右往左，每三位一个逗号。
     *
     * 1. 让字符串的长度对3取模
     * 1.1 如果正好整除，那么余数是0，则我们只需要三位一分割，然后使用逗号连接起来即可。
     * 1.2 如果没有整数，那么余数只能是 1 或者 2，那么我们把这部分先截取出来，然后的部分每三位一分割，然后在最全部的数据逗号连接即可。
     *
     * https://ncov.dxy.cn/ncovh5/view/pneumonia?link=&share=&source=
     *
     */
    Vue.filter('numberFormat', function (input) {
        input = input + ''; // 数字转换为字符串进行处理

        var _number = input.length % 3;
        var _rs = [];
        var _prefix = '';
        var _index = 0;
        var _tmp = '';

        if (_number) {
            _prefix = input.substring(0, _number);
            _rs.push(_prefix);
        }
        input = input.substring(_number); // 剩下部分
        for (var i = 0; i < input.length; i++) {
            // 每三位截取一下
            _index++;
            _tmp += input[i];

            if (_index == 3) {
                _rs.push(_tmp);
                _tmp = '';
                _index = 0;
            }
        }

        // 得到每三位组成的部分，以及不是三的倍数的部分的前缀
        return _rs.join(',');
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vue',
            viewCount: 12345678,
        }
    })
</script>

</html>
